import 'package:flutter/material.dart';
import 'package:test/extension/StringExtension.dart';

class SwitchView extends StatefulWidget {
  const SwitchView({super.key});

  @override
  State<SwitchView> createState() => _SwitchViewState();
}

class _SwitchViewState extends State<SwitchView> {
  final List<String> imgs = const [
    "assets/images/head_icon/icon_5.webp",
    "assets/images/head_icon/icon_6.webp",
    "assets/images/head_icon/icon_7.webp",
    "assets/images/head_icon/icon_8.webp"
  ];
  bool _checked2 = false;

  final List<Color> colors = const [
    Colors.red,
    Colors.yellow,
    Colors.blue,
    Colors.green,
  ];
  bool _checked = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(body: Center(
        child: Container(color: Colors.purple,
            width: 300,
            height: 500,
            child: Column(children: [getSwitch(), getSwitch2()]))));
  }

  //      "widgetId": 40,
  //      "name": 'Switch基础用法',
  //      "priority": 1,
  //      "subtitle":
  //          "【inactiveThumbColor】 : 未选中小圈颜色   【Color】\n"
  //          "【inactiveTrackColor】 : 未选中滑槽颜色   【Color】\n"
  //          "【activeColor】 : 选中时小圈颜色   【Color】\n"
  //          "【activeTrackColor】 : 选中时滑槽颜色   【Color】\n"
  //          "【onChanged】 : 切换回调   【Function(double)】"
  //          "  onChanged时,回调true、null、false三种状态",
  Widget getSwitch() {
    return Wrap(
      spacing: 10,
      children:
          colors
              .map(
                (e) => Switch(
                  value: _checked,
                  inactiveThumbColor: e,
                  inactiveTrackColor: Colors.grey.withAlpha(88),
                  activeColor: Colors.green,
                  activeTrackColor: Colors.orange,
                  onChanged: (v) {
                    setState(() {
                      "$v".logS();
                      _checked = v;
                    });
                  },
                ),
              )
              .toList(),
    );
  }

  //    {
//      "widgetId": 40,
//      "name": 'Switch图片',
//      "priority": 2,
//      "subtitle":
//          "【inactiveThumbImage】 : 未选中小圈图片   【ImageProvider】\n"
//          "【activeThumbImage】 : 选中小圈图片   【ImageProvider】",
//    }
  Widget getSwitch2() {
    return Wrap(
      spacing: 10,
      children: imgs
          .map((e) =>
          Switch(
              value: _checked2,
              inactiveThumbImage: AssetImage(e),
              activeThumbImage: const AssetImage('assets/images/icon_head.webp'),
              onChanged: (v) {
                setState(() => _checked2 = v);
              }))
          .toList(),
    );
  }
}
